export default function HomePage({ branding, navigate, onContactSubmit }) { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [loanGoal, setLoanGoal] = useState('purchase'); const [formData, setFormData] = useState({ name: '', email: '', phone: '', message: '' }); const [consent, setConsent] = useState(false); const [consentError, setConsentError] = useState(''); const [status, setStatus] = useState('idle'); const formRef = useRef(null); const journeyRef = useRef(null); const [journeyVisible, setJourneyVisible] = useState(false); const journeySteps = [ { num: '01', title: "Let's Talk", desc: "Whether you schedule a call or complete my online form, we'll discuss your goals, answer your questions, and determine the financing options that best fit your needs.", icon: 'chat', }, { num: '02', title: 'Get Pre-Approved', desc: "I'll review your financial information and provide a personalized pre-approval so you can shop confidently, knowing exactly what you can afford.", icon: 'badge', }, { num: '03', title: 'Find Your Home', desc: "Work with your real estate agent to find the right home while I'm available every step of the way to answer financing questions, update your pre-approval if needed, and help strengthen your offer.", icon: 'home', }, { num: '04', title: 'Submit Your Loan', desc: "Once you're under contract, I'll finalize your loan application, gather any remaining documentation, and submit your complete loan package to the lender for underwriting.", icon: 'doc', }, { num: '05', title: 'Final Approval', desc: "I'll work directly with underwriting, keep you informed throughout the process, and help satisfy any remaining conditions needed for final loan approval.", icon: 'check', }, { num: '06', title: 'Welcome Home', desc: "We'll review your final loan documents, coordinate with escrow and title, and celebrate as you receive the keys to your new home—or successfully complete your refinance.", icon: 'key', }, ]; useEffect(() => { const el = journeyRef.current; if (!el) return; const obs = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setJourneyVisible(true); obs.disconnect(); } }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' } ); obs.observe(el); return () => obs.disconnect(); }, []); useEffect(() => { const SCRIPT_ID = 'loai-booking-embed'; const initBadge = () => { if (window.LOAI && typeof window.LOAI.initBadge === 'function') { window.LOAI.initBadge({ slug: 'C78uS2mKdMg', position: 'bottom-left' }); } }; const existing = document.getElementById(SCRIPT_ID); if (existing) { initBadge(); return; } const script = document.createElement('script'); script.id = SCRIPT_ID; script.src = 'https://app.loanofficer.ai/booking-embed.js'; script.async = true; script.onload = initBadge; document.body.appendChild(script); }, []); const pc = '#152a6e'; const sc = branding.secondaryColor || '#010204'; const scrollToForm = () => { formRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; const handleSubmit = async (e) => { e.preventDefault(); if (!formData.name.trim() || !formData.email.trim() || !formData.message.trim()) return; const hasPhone = formData.phone.trim().length > 0; if (hasPhone && !consent) { setConsentError('Please check this box to consent to SMS/text messages and phone communications, or remove the phone number to continue by email only.'); return; } setConsentError(''); setStatus('sending'); try { const goalLabel = loanGoal === 'refinance' ? 'Refinance' : 'Purchase'; await onContactSubmit({ name: formData.name, email: formData.email, phone: formData.phone || undefined, message: `[${goalLabel}] ${formData.message}`, }); setStatus('sent'); setFormData({ name: '', email: '', phone: '', message: '' }); setConsent(false); setConsentError(''); } catch { setStatus('error'); } }; return (

{ e.target.style.position = 'fixed'; e.target.style.width = 'auto'; e.target.style.height = 'auto'; e.target.style.overflow = 'visible'; e.target.style.clip = 'auto'; }} onBlur={(e) => { e.target.style.position = 'absolute'; e.target.style.width = '1px'; e.target.style.height = '1px'; e.target.style.overflow = 'hidden'; e.target.style.clip = 'rect(0,0,0,0)'; }} > Skip to main content

{branding.phone && ( {branding.phone} )}

{mobileMenuOpen && (

{branding.phone && ( {branding.phone} )}

)}

{branding.nmls ? `NMLS# ${branding.nmls}` : 'Licensed Mortgage Advisor'}

Buy or refinance with a clear path to close.

Whether you're buying your first home, moving up, investing, or refinancing, I'll help you understand your options and guide you from application to closing—with honest advice, clear communication, and no pressure.

Book a call

What do you need?

{[ { id: 'purchase', label: 'Purchase', desc: 'Buy a home' }, { id: 'refinance', label: 'Refinance', desc: 'Lower payment or cash-out' }, ].map((opt) => ( ))}

Personalized rate options for your credit and timeline
Clear next steps after you submit
Direct access to {branding.fullName?.split(' ')[0] || 'your advisor'}

Your Home Loan Journey with Spiro

From our first conversation to closing day, I'll personally guide you through every step with clear communication, honest advice, and personal service.

{journeySteps.map((step, i) => { const iconPaths = { chat: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z', badge: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z', home: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1h-2z', doc: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', check: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4', key: 'M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z', }; return (

Step {step.num}: {step.title}

{step.desc}

); })}

You'll always work directly with me—not a call center. I'll keep you informed every step of the way.

{branding.meetingLink && (

Let's Talk

)}

{branding.headshotUrl ? (

) : (

{(branding.fullName || 'SH').split(' ').map((s) => s[0]).slice(0, 2).join('')}

)}

{branding.fullName || 'Spiro Hishmeh'}

{branding.title || 'Mortgage Advisor'} · {branding.company || 'C2 Financial Corp'}

{branding.nmls &&

NMLS# {branding.nmls}

}

Tell me whether you're buying or refinancing. I'll review your situation personally and follow up with financing options that fit your goals—no pressure, just honest guidance.

Get your options

One form. {branding.fullName?.split(' ')[0] || 'Spiro'} follows up personally.

{status === 'sent' ? (

Thanks — we’ve got it.

{branding.fullName?.split(' ')[0] || 'Spiro'} will reach out shortly using the contact info you provided.

) : (

I’m looking to *

{[ { id: 'purchase', label: 'Purchase a home' }, { id: 'refinance', label: 'Refinance' }, ].map((opt) => ( ))}

Full Name * setFormData({ ...formData, name: e.target.value })} className="w-full px-4 py-3 rounded-xl text-sm outline-none transition-all duration-200" style={{ border: '1px solid #e2e8f0', color: '#0f172a', backgroundColor: '#fff' }} />

Email * setFormData({ ...formData, email: e.target.value })} className="w-full px-4 py-3 rounded-xl text-sm outline-none transition-all duration-200" style={{ border: '1px solid #e2e8f0', color: '#0f172a' }} />

Phone (optional) { const phone = e.target.value; setFormData({ ...formData, phone }); if (!phone.trim()) setConsentError(''); }} className="w-full px-4 py-3 rounded-xl text-sm outline-none transition-all duration-200" style={{ border: '1px solid #e2e8f0', color: '#0f172a' }} />

{loanGoal === 'refinance' ? 'Tell me about your current loan *' : 'Tell me about your purchase *'}

setFormData({ ...formData, message: e.target.value })}
                    placeholder={loanGoal === 'refinance' ? 'Current rate, balance, cash-out needs, timeline…' : 'Price range, location, timeline, first-time buyer…'}
                    className="w-full px-4 py-3 rounded-xl text-sm outline-none resize-none transition-all duration-200"
                    style={{ border: '1px solid #e2e8f0', color: '#0f172a', fontFamily: "'DM Sans', system-ui, sans-serif" }}
                  />
                </div>

<div className="pt-1">
                  <label htmlFor="funnel-consent" className="flex items-start gap-2.5 cursor-pointer select-none">
                    <input
                      id="funnel-consent"
                      type="checkbox"
                      required={formData.phone.trim().length > 0}
                      aria-required={formData.phone.trim().length > 0}
                      aria-invalid={consentError ? 'true' : 'false'}
                      aria-describedby={consentError ? 'funnel-consent-error' : undefined}
                      checked={consent}
                      onChange={(e) => {
                        setConsent(e.target.checked);
                        if (e.target.checked) setConsentError('');
                      }}
                      className="mt-0.5 w-4 h-4 flex-shrink-0 cursor-pointer"
                      style={{ accentColor: pc }}
                    />
                    <span className="text-xs leading-relaxed" style={{ color: '#475569', fontFamily: "'DM Sans', system-ui, sans-serif" }}>
                      I agree to receive SMS/text messages, automated calls, and prerecorded voice messages from Spiro Hishmeh, Mortgage Loan Originator with C2 Financial Corporation (NMLS #250163; Company NMLS #135622), at the email address and/or phone number I provided regarding my mortgage inquiry or loan application. Communications may include loan application updates, loan status updates, requests for documentation, appointment reminders, mortgage market updates, educational home financing information, and other mortgage-related communications. Message frequency varies. Message and data rates may apply. Reply HELP for assistance or STOP to opt out at any time. Consent is not required as a condition of applying for or obtaining a mortgage loan, purchasing any product or service, or submitting this form.
                    </span>
                  </label>
                  {consentError && (
                    <p id="funnel-consent-error" role="alert" className="text-xs mt-2 leading-relaxed" style={{ color: '#b91c1c', fontFamily: "'DM Sans', system-ui, sans-serif" }}>
                      {consentError}
                    </p>
                  )}
                </div>

{status === 'error' && (
                  <div className="p-3 rounded-xl flex items-center justify-between gap-3" style={{ backgroundColor: '#fef2f2', border: '1px solid #fecaca' }} role="alert">
                    <p className="text-xs" style={{ color: '#b91c1c' }}>Something went wrong. Please try again.</p>
                    <button type="button" onClick={() => setStatus('idle')} className="text-xs font-semibold underline flex-shrink-0" style={{ color: '#b91c1c' }}>Retry</button>
                  </div>
                )}

<button
                  type="submit"
                  disabled={status === 'sending'}
                  className="w-full py-3.5 rounded-xl text-white font-bold transition-all duration-200 hover:shadow-xl active:translate-y-[1px] disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                  style={{ backgroundColor: pc }}
                >
                  {status === 'sending' ? (
                    <>
                      <svg aria-hidden="true" className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" className="opacity-25" />
                        <path fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" className="opacity-75" />
                      </svg>
                      Sending…
                    </>
                  ) : (
                    'Get my options'
                  )}
                </button>

<p className="text-xs text-center leading-relaxed pt-1" style={{ color: '#94a3b8', fontFamily: "'DM Sans', system-ui, sans-serif" }}>
                  Your information is kept confidential. By submitting this form, you acknowledge that you have read and agree to our{' '}
                  <button type="button" onClick={() => navigate('/privacy-policy')} className="underline bg-transparent border-none p-0 cursor-pointer" style={{ color: pc }}>Privacy Policy</button>
                  {' '}and{' '}
                  <button type="button" onClick={() => navigate('/terms-of-service')} className="underline bg-transparent border-none p-0 cursor-pointer" style={{ color: pc }}>Terms of Service</button>.
                </p>
              </form>
            )}
          </div>
        </section>
      </main>

<footer aria-label="Footer" style={{ backgroundColor: '#0b1428' }}>
        <div className="max-w-5xl mx-auto px-4 sm:px-6 py-12">
          <div className="grid md:grid-cols-2 gap-8 mb-8">
            <div>
              {branding.logoUrl ? (
                <img src={branding.logoUrl} alt={branding.company || branding.fullName || 'Company logo'} className="h-8 w-auto max-w-[130px] object-contain mb-3 brightness-0 invert" />
              ) : (
                <p className="text-lg font-bold text-white mb-3">{branding.company || branding.fullName}</p>
              )}
              <p className="text-sm leading-relaxed max-w-xs" style={{ color: '#9ca3af' }}>
                Purchase and refinance mortgage guidance from {branding.fullName || 'Spiro Hishmeh'}.
              </p>
            </div>
            <div className="text-sm space-y-2" style={{ color: '#9ca3af' }}>
              {branding.email && <p>{branding.email}</p>}
              {branding.phone && <p>{branding.phone}</p>}
              {branding.nmls && <p>NMLS# {branding.nmls}</p>}
              {branding.companyNmls && <p>Company NMLS# {branding.companyNmls}</p>}
              <a href="https://www.nmlsconsumeraccess.org" target="_blank" rel="noopener noreferrer" className="block hover:text-white transition-colors">NMLS Consumer Access</a>
            </div>
          </div>
          {branding.disclaimer && (
            <div className="border-t pt-6 mb-4" style={{ borderColor: '#374151' }}>
              <p className="text-xs leading-relaxed mb-3" style={{ color: '#9ca3af' }}>{branding.disclaimer}</p>
              <p className="text-xs leading-relaxed mb-2" style={{ color: '#9ca3af' }}>
                This licensee is performing acts for which a real estate license is required. C2 Financial Corporation is licensed by the California Department of Real Estate, Broker # 01821025; NMLS# 135622. Loan approval is not guaranteed and is subject to lender review of information. All loan approvals are conditional and all conditions must be met by borrower. Loan is only approved when lender has issued approval in writing and is subject to the Lender conditions. Specified rates may not be available for all borrowers. Rate subject to change with market conditions. C2 Financial Corporation is an Equal Opportunity Mortgage Broker/Lender. The services referred to herein are not available to persons located outside the state of CA.
              </p>
              <p className="text-xs mb-1" style={{ color: '#9ca3af' }}>
                <a href="https://www.c2financialcorp.com" target="_blank" rel="noopener noreferrer" className="font-bold text-white underline underline-offset-4 hover:text-blue-300 transition-colors">{branding.company || 'C2 Financial Corp'}</a>
                {' | 371 Bel Marin Keys Blvd., #130, Novato, CA 94949 | 12230 El Camino Real, Suite 100, San Diego, CA 92130 | '}
                <a href="https://www.c2financialcorp.com" target="_blank" rel="noopener noreferrer" className="font-bold text-white underline underline-offset-4 hover:text-blue-300 transition-colors">www.c2financialcorp.com</a>
              </p>
              <p className="text-xs italic" style={{ color: '#9ca3af' }}>
                Terms & Conditions / Privacy Policy provided by {branding.fullName || 'Spiro Hishmeh'} at {branding.company || 'C2 Financial Corp'}.
              </p>
            </div>
          )}
          <div className="flex flex-wrap items-center justify-between gap-4 text-xs border-t pt-6" style={{ borderColor: '#374151', color: '#9ca3af' }}>
            <p>© {new Date().getFullYear()} {branding.company || branding.fullName || 'All rights reserved.'}</p>
            <div className="flex flex-wrap gap-4">
              <button type="button" onClick={() => navigate('/privacy-policy')} className="hover:text-white transition-colors bg-transparent border-none p-0 cursor-pointer" style={{ color: '#9ca3af' }}>Privacy Policy</button>
              <button type="button" onClick={() => navigate('/terms-of-service')} className="hover:text-white transition-colors bg-transparent border-none p-0 cursor-pointer" style={{ color: '#9ca3af' }}>Terms of Service</button>
              <a href="https://www.nmlsconsumeraccess.org" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">NMLS Consumer Access</a>
            </div>
          </div>
        </div>
      </footer>
      <a
        href="https://app.loanofficer.ai/book/C78uS2mKdMg"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Book a Meeting"
        className="fixed bottom-5 left-5 z-[60] inline-flex items-center gap-2 px-5 py-3 rounded-full text-sm font-semibold text-white shadow-lg transition-all duration-200 hover:shadow-xl hover:opacity-95 active:scale-[0.98] no-underline"
        style={{ backgroundColor: '#152a6e', boxShadow: '0 12px 28px -8px rgba(21, 42, 110, 0.45)' }}
      >
        <svg aria-hidden="true" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        Book a Meeting
      </a>
    </div>
  );
}</article></body></html>